<template>
    <h1 class="home_title" style="text-align: center;">
        <el-button :icon="ArrowLeft" @click="getPreYearData">上一年</el-button>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <span>{{ year }}</span>
        <span>年学员数量</span>
        &nbsp; &nbsp; &nbsp; &nbsp;
        <el-button :icon="ArrowRight" @click="getNextYearData">下一年</el-button>
    </h1>
    <div id="main" style="height: 500px;"></div>
</template>
<script setup lang="ts">
import { reqStudentsForYear } from '@/api/student';
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue';
import * as echarts from 'echarts';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';


const year = ref(2025);
const getPreYearData = () => {
    year.value--;
    drawChart()
}
const getNextYearData = () => {
    year.value++;
    drawChart()
}
//绘制图标
const drawChart = () => {
    reqStudentsForYear(year.value).then((resp) => {
        //@ts-ignore
        if (resp.status == 0) {
            //基于准备好的dom，初始化echarts
            var myChart = echarts.init(document.getElementById("main"));
            let dataArr: number[] = [];
            let option;
            if (resp.data && resp.data.length) {
                resp.data.forEach(item => {
                    console.log(item);
                    dataArr[parseInt(item._id) - 1] = item.count
                })
            } else {
                ElMessage({
                    message: '当前年份无数据',
                    type: 'warning'
                })
            }
            option = {
                xAxis: {
                    data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        type: 'bar',
                        data: dataArr
                    },
                ],
            };
            myChart.setOption(option)
        }
    })
}
onMounted(() => {
    drawChart()
})
</script>

<style scoped></style>